<template>
	<div class="contain">
		<div class="left">
			<back></back>
			<div class="back-text">
				<a @click="turn('/')">未来蜂首页</a>
			</div>
		</div>
		<div class="right">

		<div class="my-order">
			<a  href="javascript:void(0)" @click="turn('/trolley')">我的订单</a>
		</div>
		<div  @mouseover="idshow = false,idHover = true" @mouseleave="idshow  = false ,idHover = false" :class="{ 'id-hover': idHover }"  >
			<div v-show="idshow" class="id-content"  @mouseover="idshow = true,idHover = true" @mouseleave="idshow  = false,idHover = false">
				<div class="pict">
					<el-avatar size="large"/>
				</div>
				<div class="pict-text"></div>
				<div class="exit">
					<a  href="javascript:void(0)">退出</a>
				</div>
				
			</div>
		</div>
	</div>
</div>
</template>

<script >
import { UserFilled } from '@element-plus/icons-vue'
import { computed } from 'vue';
import { ref } from 'vue';  
import { Path } from '@/constant';
import back from '@/components/components-zjm/back'; 
import router from '@/router';
import { useUserStore } from '@/stores/pinia';
const userStore = useUserStore();

export default{
	components: {
		back 
	},  
	setup() {
		const idHover = ref(false);  
		const idshow=ref(false);
		const turn=(path)=>{
			router.push(path)
		}
		const people=ref([
			{ id: 1, imageUrl: '../../public/images/product/贝蓓芯水果胡萝卜即食新鲜迷你拇指小萝卜营养蔬菜零食小包装45g 24.6元.jpg', username: '汪佳泉' } 
		]);
		return{
			idHover,
			people,
			idshow,
			turn
		}
	}
}
</script>

<style scoped lang="scss">
	.contain{
		background-color: #333333;
		height:30px;
		padding-left: 16.5%;
		padding-right: 16.5%;
		padding-top: 0%;
		padding-bottom: 0%;
		display: flex;
		align-items: center;
		
		.left{
			display: flex;
			.back-text{
				color: white;
				font-size: 13.7px;
				width: 87%;
				&:hover {
				  color: #ff1100;  
				}  
			}
		}
		.right{
			
				margin-left:69%;
				display: flex;
				align-items: center;
			height: 100%;
			.id{
				justify-content: center;
				position: relative;
				padding-left: 20px;
				width: 150px;
				color: white;
				height: 100%;
				display: flex;
				align-items: center;
				&:hover, &.id-hover {  
				      // 当鼠标悬停或 idHover 为 true 时应用的样式  
				      background-color: white;  
				      color: #000; // 如果需要改变文字颜色  
				    }  
			}
			.id-content{
				z-index: 3;
				padding-left: 10px;
				padding-top: 10px;
				padding-right: 10px;
				position: absolute;
				border:0.1px solid #000;
				border-top: none;
				display: flex;
				justify-content: space-between;
				width: 215px;
				top: 3.1%;
				height: auto;
				color: #000;
				background-color: white;
				.exit{
					a{
						text-decoration: none;
						color: #000;
						&:hover {
						color:#f42601; 
						}  
					}
				}
			}
		}
		.my-order{
			a{
				text-decoration: none;
				color: white;
				&:hover {
				color:#f42601; 
				}  
			}
		}
	}
</style>